<!DOCTYPE html>
<html lang="en">
  .
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="/plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="/plugin/swiper/swiper.min.css" />
    <link rel="stylesheet" href="/css/myAnimate.css" />
    <link rel="stylesheet" href="/css/common.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/animate.css" />
    <link rel="stylesheet" href="/css/fonts/iconfont.css" />
    <link
      rel="stylesheet"
      href="/plugin/bootstrap/dist/datepicker/datetimepicker.min.css"
    />
    <link rel="stylesheet" href="/plugin/bootstrap/dist/select/select.css" />
    <link rel="stylesheet" href="/css/theme_red.css" />
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/datepicker/datetimepicker.min.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/select/select.js"
    ></script>
    <script type="text/javascript" src="/plugin/layui/layui.js"></script>
    <style>
      .echartsBox {
        height: 300px;
      }
    </style>
  </head>
  <body class="child_body">
    <div class="formModal">
      <div class="searchBox">
        <div class="searchBtnBox flex">
          <div class="flex-1 flex">
            <button type="button" class="btn btn-info btn-sm m-r-5">
              <span class="iconfont icon-search"></span>
              <span class="text">查询</span>
            </button>
            <button type="button" class="btn btn-default btn-sm m-r-10">
              <span class="iconfont icon-reset"></span>
              <span class="text">重置</span>
            </button>
            <div class="customForm pointer showMoreFilter">
              <span class="iconfont icon-filter"></span>
              <span>高级筛选</span>
            </div>
          </div>
          <div></div>
        </div>
        <div class="searchForm form-inline row">
          <span class="searchFormClose iconfont icon-close-rs"></span>
          <div class="formItem col-md-4 flex">
            <label class="form-label">接受单位</label>
            <div id="selectTest" class="comSelectBox"></div>
          </div>
          <div class="formItem col-md-4 flex">
            <label class="form-label">事件来源</label>
            <select class="flex-1 fullWidth selectpicker" title="请选择">
              <option>Mustard</option>
              <option>Ketchup</option>
              <option>Barbecue</option>
            </select>
            <!-- <div id="selectEvenTest" class="comSelectBox"></div> -->
          </div>
          <div class="formItem col-md-4 flex">
            <label class="form-label">时间选择</label>
            <div class="flex-1 fullWidth" id="datetimepicker"></div>
          </div>
          <div class="formItem col-md-4 flex">
            <label class="form-label">时间区间</label>
            <div id="comDateArea" class="comTimeRange flex-1 fullWidth"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-t-15">
      <div class="noticeBox flex">
        <div class="noticeItem flex-1">
          <div class="title">录入通报</div>
          <div class="flex items-center justify-center">
            <div class="left">1052</div>
            <ul class="flex-1">
              <li>今日录入：<span class="number">50</span></li>
              <li>本周录入：<span class="number">300</span></li>
              <li>本月录入：<span class="number">1000</span></li>
            </ul>
          </div>
        </div>
        <div class="noticeItem flex-1">
          <div class="title">派发通报</div>
          <div class="flex items-center justify-center">
            <div class="left">1052</div>
            <ul class="flex-1">
              <li>今日派发：<span class="number">12</span></li>
              <li>本周派发：<span class="number">20</span></li>
              <li>本月派发：<span class="number">150</span></li>
            </ul>
          </div>
        </div>
        <div class="noticeItem flex-1">
          <div class="title">处置通报</div>
          <div class="flex items-center justify-center">
            <div class="left">1052</div>
            <ul class="flex-1">
              <li>今日处置：<span class="number">10</span></li>
              <li>本周处置：<span class="number">30</span></li>
              <li>本月处置：<span class="number">100</span></li>
            </ul>
          </div>
        </div>
        <div class="noticeItem flex-1">
          <div class="title">超时处置通报</div>
          <div class="flex items-center justify-center">
            <div class="left">1052</div>
            <ul class="flex-1">
              <li>今日超时：<span class="number">1</span></li>
              <li>本周超时：<span class="number">5</span></li>
              <li>本月超时：<span class="number">10</span></li>
            </ul>
          </div>
        </div>
        <div class="noticeItem flex-1">
          <div class="title">审核通报</div>
          <div class="flex items-center justify-center">
            <div class="left">1052</div>
            <ul class="flex-1">
              <li>今日审核：<span class="number">100</span></li>
              <li>本周审核：<span class="number">500</span></li>
              <li>本月审核：<span class="number">1200</span></li>
            </ul>
          </div>
        </div>
        <div class="noticeItem flex-1">
          <div class="title">归档通报</div>
          <div class="flex items-center justify-center">
            <div class="left">1052</div>
            <ul class="flex-1">
              <li>今日归档：<span class="number">20</span></li>
              <li>本周归档：<span class="number">30</span></li>
              <li>本月归档：<span class="number">40</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="formModal m-t-15">
      <div class="formHead flex">
        <div class="title flex-1">
          <span class="spanText">通报统计图</span>
        </div>
        <div class="formHeadOper">
          <span class="operateView iconfont icon-more-right showMore"></span>
        </div>
      </div>
      <div class="formBox">
        <div class="flex">
          <div class="formItem flex">
            <label class="form-label w90">日期</label>
            <div id="formDateAreaPicker" class="p-l-10"></div>
          </div>

          <div class="m-l-5">
            <button type="button" class="btn btn-info btn-sm">查询</button>
          </div>
        </div>
        <div class="echartsBox" id="lineEcharts"></div>
      </div>
      <div class="formHead flex">
        <div class="title flex-1">
          <span class="spanText">通报分布图</span>
        </div>
        <div class="formHeadOper">
          <span class="operateView iconfont icon-more-right showMore"></span>
        </div>
      </div>
      <div class="formBox">
        <div class="flex">
          <div class="formItem flex">
            <label class="form-label w90">日期</label>
            <div id="fenbuDateAreaPicker" class="p-l-10"></div>
          </div>
          <div class="formItem flex">
            <label class="form-label w150">通报分布</label>
            <select class="flex-1 selectpicker" title="请选择">
              <option>通报分布</option>
            </select>
          </div>
          <div class="m-l-5">
            <button type="button" class="btn btn-info btn-sm">查询</button>
          </div>
        </div>
        <div class="echartsBox" id="pieEcharts"></div>
      </div>
      <div class="formHead flex">
        <div class="title flex-1">
          <span class="spanText">用户统计</span>
        </div>
        <div class="formHeadOper">
          <span class="operateView iconfont icon-more-right showMore"></span>
        </div>
      </div>
      <div class="formBox">
        <div class="flex">
          <div class="formItem flex">
            <label class="form-label w90">日期</label>
            <div id="loginDateAreaPicker" class="p-l-10"></div>
          </div>
          <div class="m-l-5">
            <button type="button" class="btn btn-info btn-sm">查询</button>
          </div>
        </div>
        <div class="p-l-r-15">
          <ul class="comTab loginTab clearfix m-b-15">
            <li class="active">图标</li>
            <li>表格</li>
          </ul>
          <div class="echartsBox" id="loginEcharts"></div>
          <table class="table" style="display: none" id="userTable"></table>
        </div>
      </div>
      <div class="formHead flex">
        <div class="title flex-1">
          <span class="spanText">单位反馈等保信息</span>
        </div>
        <div class="formHeadOper">
          <span class="operateView iconfont icon-more-right showMore"></span>
        </div>
      </div>
      <div class="formBox">
        <div class="flex">
          <div class="formItem flex">
            <label class="form-label w90">日期</label>
            <div id="infoDateAreaPicker" class="p-l-10"></div>
          </div>
          <div class="m-l-5">
            <button type="button" class="btn btn-info btn-sm">查询</button>
          </div>
        </div>
        <div class="p-l-r-15">
          <ul class="comTab infoTab clearfix m-b-15">
            <li class="active">图标</li>
            <li>表格</li>
          </ul>
          <div class="echartsBox" id="infoEcharts"></div>
          <table class="table" style="display: none" id="infoTable"></table>
        </div>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      bindComEvent();
      initEcharts();
      initPieEcharts();
      initLoginEcharts();
      initInfoEcharts();
      $.comSelect({
        id: "selectTest",
        type: "checkbox", //或者Radio
        data: [
          { id: 1001, name: "账单" },
          { id: 1002, name: "文档" },
        ],
      }); //
      $.comSelect({
        id: "selectEvenTest",
        type: "checkbox", //或者Radio
        data: [
          { id: 1001, name: "账单" },
          { id: 1002, name: "文档" },
        ],
      });
      $("#datetimepicker").datePicker({
        dateType: "date",
        format: "datetime",
      });
      $("#comDateArea").datePicker({
        dateType: "daterange",
        format: "datemin",
        rangeValue: ["2023-12-30 12:20", "2023-12-30 13:20"],
      });
      $("#formDateAreaPicker").datePicker({
        dateType: "daterange",
        format: "datemin",
        rangeValue: [],
      });
      $("#fenbuDateAreaPicker").datePicker({
        dateType: "daterange",
        format: "datemin",
        rangeValue: [],
      });
      $("#userDateAreaPicker").datePicker({
        dateType: "daterange",
        format: "datemin",
        rangeValue: [],
      });
      $("#loginDateAreaPicker").datePicker({
        dateType: "daterange",
        format: "datemin",
        rangeValue: [],
      });
      $("#infoDateAreaPicker").datePicker({
        dateType: "daterange",
        format: "datemin",
        rangeValue: [],
      });
      $.layuiTable({
        id: "userTable",
        cols: [
          {
            type: "numbers",
            title: "序号",
          },
          {
            field: "name",
            width: "50%",
            title: "部门名称",
          },
          {
            field: "login",
            title: "登录用户数",
          },
          {
            field: "unLogin",
            title: "未登录用户数",
          },
        ],
        data: [
          { name: "测试数据", login: 10, unLogin: 4 },
          { name: "市公安局", login: 22, unLogin: 4 },
        ],
      });
      $.layuiTable({
        id: "infoTable",
        cols: [
          {
            type: "numbers",
            title: "序号",
          },
          {
            field: "name",
            width: "50%",
            title: "部门名称",
          },
        ],
        data: [
          { name: "测试数据", login: 10, unLogin: 4 },
          { name: "市公安局", login: 22, unLogin: 4 },
        ],
      });
      $(".operateView")
        .off("click")
        .on("click", function () {
          if ($(this).hasClass("showMore")) {
            $(this).removeClass("showMore").addClass("hideMore");
          } else {
            $(this).removeClass("hideMore").addClass("showMore");
          }
          $(this).parents(".formHead").next(".formBox").fadeToggle();
        });

      $(".loginTab")
        .off("click", "li")
        .on("click", "li", function () {
          var index = $(this).index();
          $(this).addClass("active").siblings().removeClass("active");
          if (index == 0) {
            $("#loginEcharts").fadeIn();
            $("#userTable").hide();
          } else {
            $("#loginEcharts").hide();
            $("#userTable").fadeIn();
          }
        });
      $(".infoTab")
        .off("click", "li")
        .on("click", "li", function () {
          var index = $(this).index();
          $(this).addClass("active").siblings().removeClass("active");
          if (index == 0) {
            $("#infoEcharts").fadeIn();
            $("#infoTable").hide();
          } else {
            $("#infoEcharts").hide();
            $("#infoTable").fadeIn();
          }
        });
    });

    function initEcharts(options) {
      var chartDom = document.getElementById("lineEcharts");
      var myChart = echarts.init(chartDom);
      var option;
      var base = +new Date(2024, 1, 1);
      var oneDay = 24 * 3600 * 1000;
      var date = [];

      for (let i = 0; i < 30; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
      }
      function getData() {
        var data = [];
        for (let i = 0; i < 364; i++) {
          data.push(Math.round(Math.random(i) * 1000) / 100);
        }
        return data;
      }
      option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        legend: {
          data: [
            "已派发通报",
            "待接收通报",
            "待处置通报",
            "待审核通报",
            "待归档通报",
            "已归档通报",
            "处置超时通报",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        series: [
          {
            name: "已派发通报",
            type: "line",
            stack: "Total",
            data: getData(),
          },
          {
            name: "待接收通报",
            type: "line",
            stack: "Total",
            data: getData(),
          },
          {
            name: "待处置通报",
            type: "line",
            stack: "Total",
            data: getData(),
          },
          {
            name: "待审核通报",
            type: "line",
            stack: "Total",
            data: getData(),
          },
          {
            name: "待归档通报",
            type: "line",
            stack: "Total",
            data: getData(),
          },
          {
            name: "已归档通报",
            type: "line",
            stack: "Total",
            data: getData(),
          },
          {
            name: "处置超时通报",
            type: "line",
            stack: "Total",
            data: getData(),
          },
        ],
      };

      option && myChart.setOption(option);
    }
    function initPieEcharts(options) {
      var chartDom = document.getElementById("pieEcharts");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}\n数量：{c}({d}%)",
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: "#999",
            },
          },
        },
        legend: {
          orient: "vertical",
          left: "15px",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "待接收" },
              { value: 735, name: "待处置" },
              { value: 580, name: "待审核" },
              { value: 484, name: "待归档" },
              { value: 300, name: "已归档" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    }
    function initLoginEcharts(options) {
      var chartDom = document.getElementById("loginEcharts");
      var myChart = echarts.init(chartDom);
      var option;
      var base = +new Date(2024, 1, 1);
      var oneDay = 24 * 3600 * 1000;
      var date = [
        "委员办公室",
        "集团有限公司",
        "政府办公室",
        "市公安局",
        "保障局",
      ];
      function getData() {
        var data = [];
        for (let i = 0; i < date.length; i++) {
          data.push(Math.round(Math.random() * 1000) / 100);
        }
        return data;
      }
      option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        legend: {
          data: ["登录", "未登录"],
          top: "15px",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        series: [
          {
            name: "登录",
            type: "line",
            stack: "Total",
            data: getData(),
          },
          {
            name: "未登录",
            type: "line",
            stack: "Total",
            data: getData(),
          },
        ],
      };

      option && myChart.setOption(option);
    }
    function initInfoEcharts() {
      var chartDom = document.getElementById("infoEcharts");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {},
        xAxis: {
          type: "category",
          data: [
            "委员办公室",
            "集团有限公司",
            "政府办公室",
            "市公安局",
            "保障局",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70],
            type: "bar",
            barWidth: 20,
          },
        ],
      };
      option && myChart.setOption(option);
    }
  </script>
</html>
